import Layout from '../../index.js'
import ReactDOM from 'react-dom'
import React, {Component} from 'react'
import { Form, Icon, Input, Button } from 'antd';
const FormItem = Form.Item;

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}

class LoginForm extends React.Component {
  componentWillMount() {
    // this.setState({
    //   userNameError: '',
    //   passwordError: ''
    // })
  }
  componentDidMount() {
    // To disabled submit button at the beginning.
   // this.props.form.validateFields();
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        this.props.form.setFields({
          userName: {
            value: '1111',
            errors: [new Error('boom')]
          },
        });
      }
    });
  }
  render() {
    // 这里的render频率对应getFieldDecorator的options的trigger选项 默认onChange，即每次onChange时都会rerender该块
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form
    // let userNameError = this.state.userNameError, passwordError = this.state.passwordError
    // this.setState({
    //   userNameError: isFieldTouched('userName') && getFieldError('userName'),
    //   passwordError: isFieldTouched('password') && getFieldError('password')
    // })
    // Only show error after a field is touched.
    const userNameError = getFieldError('userName');  
    console.log('asasd' + getFieldError('userName'));
    const passwordError = getFieldError('password');
    return (
      <Form  onSubmit={this.handleSubmit}>
        <FormItem
          validateStatus={userNameError ? 'error' : ''}
          help={userNameError || ''}
        >
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }]
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          )}
        </FormItem>
        <FormItem
          validateStatus={passwordError ? 'error' : ''}
          help={passwordError || ''}
        >
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
          )}
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            htmlType="submit"
            disabled={hasErrors(getFieldsError())}
            style={{width: '100%'}}
          >
            登录
          </Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedLoginForm = Form.create()(LoginForm);

export default () => {
  return(
    <Layout isFlex={true}>
      <div className="form-container">
        <WrappedLoginForm></WrappedLoginForm>
        <style jsx>{`
          .form-container{
            margin: auto;
            padding: 40px;
            min-width: 350px;
            border: 1px solid #dae1e3;
            background: #f8fbfd;
            border-radius: 5px;
          }
        `}</style>
      </div>
    </Layout>
  )
}